<template>
  <el-drawer
    :title="title"
    size="auto"
    :wrapperClosable="false"
    :visible.sync="isShow"
    direction="rtl"
    class="drawer-form company-detail"
    @close="closeDrawer"
    >
    <div class="p-a-15" style="width:800px;" ref="drawerBody">
      <v-chart :options="totalBarOption" :autoresize="true" :style="{height:echartsHeight + 'px',width:'100%'}"></v-chart>
      <v-chart :options="multlipOption" :autoresize="true" :style="{height:echartsHeight + 'px',width:'100%',marginTop:'30px'}"></v-chart>
    </div>
  </el-drawer>
</template>
<script>
export default {
  data(){
    return{
      isShow: false,
      title: null,
      row: {},
      list: [],
      totalBarOption: null,
      multlipOption: null,
      echartsHeight:0,
    }
  },
  methods:{
    init(row){
      this.row = row;
      this.title = '应对效果评估-'+row.episode_name;
      this.getList();
      this.isShow = true;
      let domHeight = document.body.clientHeight - 55- 30 -30;
      this.echartsHeight = domHeight / 2;
    },
    closeDrawer(){
      this.row = {};
      this.list = [];
    },
    getList(){
      this.$request('get', '/stations/pollute_incidence_overlook', {id: this.row.id}, (data,msg) => {
        this.list = data;
        this.initTotalBar();
        this.initMutlipOption();
      })
    },
    initTotalBar() {
      this.totalBarOption = {
        color: ['#1890ff', '#0dcaf0', '#56e311'],
        title: {
          text: `措施执行情况`,
          left: 'center',
          top: 0,
          textStyle: {
            fontFamily: 'AlibabaPuHuiTi-Bold',
            color: 'rgba(0,0,0,.85)',
            fontSize: 20,
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: (params) => {
            if (!params) {
              return;
            }
            let html = `${params[0].name}`;
            for (const d of params) {
              html += `<div>
                <span style="display:inline-block; width: 80px">${d.marker}${d.seriesName}</span>
                <span>${d.value} 家</span>
              </div>`;
            }
            return html;
          }
        },
        grid: {
          top: 40,
          left: 30,
          right: 20,
          bottom: 40,
          containLabel: true,
        },
        legend: {
          bottom: 0,
          x: 'center',
          textStyle: {
            fontSize: 15,
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: 'rgba(0,0,0,.85)'
          }
        },
        xAxis: {
          type: 'category',
          data: this.list.map(i => i.county),
          axisLabel: {
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: 'rgba(0,0,0,.85)',
            fontSize: 12,
            interval: 0,
            // rotate: 35,
          }
        },
        yAxis: {
          type: 'value',
          name: '家',
          nameLocation: 'middle',
          nameGap: 40,
          nameTextStyle: {
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: 'rgba(0,0,0,.85)',
            fontSize: 18,
          },
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: 'rgba(0,0,0,.85)',
            fontSize: 15,
          }
        },
        series: [
          {
            name: '未落实',
            type: 'bar',
            stack: 'total',
            barMaxWidth: 35,
            data: this.list.map(i => i.none_count)
          },
          {
            name: '部分落实',
            type: 'bar',
            stack: 'total',
            barMaxWidth: 35,
            data: this.list.map(i => i.part_count)
          },
          {
            name: '已落实',
            type: 'bar',
            stack: 'total',
            barMaxWidth: 35,
            data: this.list.map(i => i.full_count)
          }
        ]
      };
    },

    initMutlipOption() {
      const data0 = [];
      const data1 = [];
      this.list.forEach(d => {
        const total = d.none_record_count + d.have_record_count;
        data0.push(total);
        if (total === 0) {
          data1.push(0);
        } else {
          let ratio =((d.have_record_count / total) * 100).toFixed(2);
          if(Number(ratio) == 0){
            data1.push(0);
          }else{
            data1.push(ratio);
          }
          // data1.push(+(d.have_record_count).toFixed(2));
        }
      });
      console.log(data0, data1);
      this.multlipOption = {
        color: ['#4caf50', '#ff9800'],
        title: {
          text: `应对过程监管情况`,
          left: 'center',
          top: 0,
          textStyle: {
            fontFamily: 'AlibabaPuHuiTi-Bold',
            color: 'rgba(0,0,0,.85)',
            fontSize: 20,
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: (params) => {
            if (!params) {
              return;
            }
            let html = `${params[0].name}`;
            for (const d of params) {
              html += `<div>
                <span style="display:inline-block; width: 80px">${d.marker}${d.seriesName}</span>
                <span>${d.value} ${d.seriesName.indexOf('比例') > -1 ? '%' : '家'}</span>
              </div>`;
            }
            return html;
          }
        },
        grid: {
          top: 40,
          left: 30,
          right: 35,
          bottom: 40,
          containLabel: true,
        },
        legend: {
          bottom: 0,
          x: 'center',
          textStyle: {
            fontSize: 15,
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: 'rgba(0,0,0,.85)'
          }
        },
        xAxis: {
          type: 'category',
          data: this.list.map(i => i.county),
          axisLabel: {
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: 'rgba(0,0,0,.85)',
            fontSize: 12,
            interval: 0,
            // rotate: 35,
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '家',
            nameLocation: 'middle',
            nameGap: 40,
            alignTicks: true,
            nameTextStyle: {
              fontFamily: 'AlibabaPuHuiTi-Regular',
              color: 'rgba(0,0,0,.85)',
              fontSize: 18,
            },
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              fontFamily: 'AlibabaPuHuiTi-Regular',
              color: 'rgba(0,0,0,.85)',
              fontSize: 15,
            }
          },
          {
            type: 'value',
            name: '监管比例',
            nameLocation: 'middle',
            nameGap: 45,
            nameTextStyle: {
              fontFamily: 'AlibabaPuHuiTi-Regular',
              color: 'rgba(0,0,0,.85)',
              fontSize: 18,
            },
            min: 0,
            max: 100,
            splitNumber: 5,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              formatter: '{value}%',
              fontFamily: 'AlibabaPuHuiTi-Regular',
              color: 'rgba(0,0,0,.85)',
              fontSize: 15,
            }
          }

        ],
        series: [
          {
            name: '企业数量',
            type: 'bar',
            barMaxWidth: 35,
            data: data0
          },
          {
            yAxisIndex: 1,
            name: '监管比例',
            type: 'line',
            symbolSize: 10,
            lineStyle: {
              width: 3,
            },
            data: data1
          }
        ]
      };
    }
  }
}
</script>